<template>
  <div class="analysis">
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="6" @click="handleSetLineChartData('今日推送单', 1)">
        <chart-card :loading="loading" title="今日推送单" :total="formData.todayOrder" style="cursor: pointer;">
          <a-tooltip slot="action" title="今日推送单，包含所有状态推送单数据">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" @click="handleSetLineChartData('本月推送单', 2)">
        <chart-card :loading="loading" title="本月推送单" :total="formData.monthOrder" style="cursor: pointer;">
          <a-tooltip slot="action" title="本月推送单，包含所有状态推送单数据">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" @click="handleSetLineChartData('今日短信', 3)">
        <chart-card :loading="loading" title="今日短信" :total="formData.todaySms" style="cursor: pointer;">
          <a-tooltip slot="action" title="今日短信，包含所有状态数据">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" @click="handleSetLineChartData('本月短信', 4)">
        <chart-card :loading="loading" title="本月短信" :total="formData.monthSms" style="cursor: pointer;">
          <a-tooltip slot="action" title="本月短信，包含所有状态数据">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/card/ChartCard'

export default {
  components: {
    ChartCard
  },
  data() {
    return {
      loading: false,
      formData: {
        todayOrder: 0,
        monthOrder: 0,
        todaySms: 0,
        monthSms: 0
      }
    }
  },
  watch: {
    loading(val) {
      this.$emit('loading', val)
    }
  },
  created() {
    this.loadData()
  },
  mounted() {
    this.handleSetLineChartData('今日推送单', 1)
  },
  methods: {
    handleSetLineChartData(title, bizType) {
      this.$emit('handleSetLineChartData', title, bizType)
    },
    loadData() {
      this.$api.chart.todayOrder().then(res => {
        this.formData.todayOrder = res
      })

      this.$api.chart.monthOrder().then(res => {
        this.formData.monthOrder = res
      })

      this.$api.chart.todaySms().then(res => {
        this.formData.todaySms = res
      })

      this.$api.chart.monthSms().then(res => {
        this.formData.monthSms = res
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
